<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色管理</title>
    <base href="/">

    <!--网页图标-->
    <link rel="shortcut icon" href="favicon.ico">

    <!--bootstrap 样式-->
    <link rel="stylesheet" href="css/plugins/bootstrap/bootstrap.min.css">

    <!--fontawesome图标样式-->
    <link href="css/plugins/font-awesome/font-awesome.css" rel="stylesheet">

    <!--bootstrap-table-->
    <link rel="stylesheet" href="css/plugins/bootstrap-table/src/bootstrap-table.css">
    <link rel="stylesheet" href="css/plugins/bootstrap-editable/bootstrap-editable.css">


    <!--ztree-->
    <link rel="stylesheet" href="css/plugins/jquery-ztree/3.5/css/metro/zTreeStyle.css">

    <!--select2-->
    <link rel="stylesheet" href="css/plugins/select/select2.css">

    <!--icheck-->
    <link rel="stylesheet" href="css/plugins/iCheck/custom.css">

    <!-- layer样式 -->
    <link rel="stylesheet" href="css/plugins/layer/skin/layer.css">

    <!--bootstrap-validator验证样式-->
    <link rel="stylesheet" href="css/plugins/bootstrap-validator/bootstrapValidator.css">

    <link rel="stylesheet" href="css/style.css">
    <!--自定义css-->
    <link rel="stylesheet" href="css/sys/user.css">
    <link rel="stylesheet" href="css/sys/global.css">


</head>
<body>
<div id="app">
    <div class="container" v-show="showList">
        <div class="row">
            <form class="form-inline" id="searchForm">
                <div>
                    <div class="form-group">
                        <label class=" control-label">角色名称：</label>

                        <input type="text" name="roleName" class="form-control" placeholder="请输入角色名称">

                    </div>

                    <div class="form-group">
                        <label class="control-label">权限字符：</label>

                        <input type="text" name="roleKey" class="form-control" placeholder="请输入权限字符">

                    </div>
                    <div class="form-group">
                        <label class="control-label">角色状态：</label>

                        <select class="form-control" name="status">
                            <option value="">所有</option>
                            <option :value="state.dictValue" v-for="state in roleStateList ">
                                {{state.dictLabel}}
                            </option>

                        </select>

                    </div>



                    <a href="javascript:void(0);" class="btn btn-primary btn-rounded" onclick="$.table.refresh()">搜索</a>
                    <a href="javascript:void(0);" class="btn btn-warning btn-rounded" onclick="$.form.reset()">重置</a>
                </div>


            </form>
        </div>
        <div class="row">
            <div id="toolbar">
                <div class="btn-group">
                    <button id="add" class="btn btn-primary btn-rounded btn-outline" @click="add">
                        <i class="fa fa-plus"></i> 新增
                    </button>
                    <button id="remove" class="btn btn-danger btn-rounded btn-outline" onclick="$.operate.remove();">
                        <i class="fa fa-trash-o"></i> 删除
                    </button>
                </div>
            </div>

            <table id="bootstrap-table"></table>
        </div>
    </div>
    <div class="container" v-show="!showList">
        <div class="row">
            <form class="form-horizontal" id="form-role" :model="role">
                <div class="form-group">
                    <label class="col-sm-3 control-label">角色名称：{{role.roleName}}</label>
                    <div class="col-sm-9">
                        <input type="text" name="loginName" v-model="role.roleName" class="form-control"
                               placeholder="请输入登录名称">
                    </div>
                </div>

                <div class="form-group">
                    <input type="hidden" name="deptId">
                    <label class="col-sm-3 control-label">权限字符：{{role.roleKey}}</label>
                    <div class="col-sm-9">
                        <input type="text" name="deptName"  v-model="role.roleKey" class="form-control"
                               placeholder="请输入部门名称">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">显示顺序：{{role.roleSort}}</label>
                    <div class="col-sm-9">
                        <input type="text" name="userName" v-model="role.roleSort" class="form-control"
                               placeholder="请输入用户名称">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">状态：{{role.status}}</label>
                    <div class="col-sm-9">
                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" checked class="onoffswitch-checkbox" v-model="role.status"
                                       id="state">
                                <label class="onoffswitch-label" for="state">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">备注：{{role.remark}}</label>
                    <div class="col-sm-8">
                        <input id="remark" name="remark" v-model="role.remark" class="form-control" type="text">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">权限菜单：{{role.menuIds}}</label>
                    <div class="col-sm-8">
                        <input id="ids" name="ids" v-model="role.menuIds" class="form-control" type="hidden">
                        <div id="tree" class="ztree treeselect"></div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-10">
                        <input class="btn btn-primary" type="submit" value="提交">
                        <input type="button" class="btn btn-danger" value="返回" @click="back">
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>


<!--jquery 脚本 -->
<script src="js/plugins/jquery/jquery.min.js"></script>

<!--bootstrap脚本-->
<script src="js/plugins/bootstrap/bootstrap.min.js"></script>

<!--bootstrap-table 插件-->
<script src="js/plugins/bootstrap-table/src/bootstrap-table.js"></script>
<!--bootstrap-table 导出图标-->
<script src="js/plugins/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>

<!--bootstrap-table 导出功能-->
<script src="js/plugins/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js"></script>
<script src="js/plugins/bootstrap-export/tableExport.js"></script>

<!--blockUI的js-->
<script src="js/plugins/blockUI/jquery.blockUI.js"></script>

<!--ztree-->
<script src="js/plugins/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>


<!--vue-->
<script src="js/plugins/vue/vue.min.js"></script>
<script src="js/plugins/vue/axios.min.js"></script>
<!--<script src="ajax/libs/vue/vue-validator.min.js"></script>-->

<!-- jquery-validate 表单验证插件 -->
<script src="js/plugins/validate/jquery.validate.min.js"></script>
<script src="js/plugins/validate/messages_zh.min.js"></script>
<script src="js/plugins/validate/jquery.validate.extend.js"></script>

<!--bootstrap-validator表单验证-->
<script src="js/plugins/bootstrap-validator/bootstrapValidator.js"></script>
<script src="js/plugins/bootstrap-validator/zh_CN.js"></script>

<!--select2-->
<script src="js/plugins/select/select2.js"></script>

<!--icheck-->
<script src="js/plugins/iCheck/icheck.min.js"></script>
<!--laydate-->
<script src="js/plugins/layer/laydate/laydate.js"></script>


<!--layer-->
<script src="js/plugins/layer/layer.min.js"></script>

<!--自定义js-->
<script src="js/common.js"></script>
<script src="js/sys/role.js"></script>


</body>
</html>